<!--
 * @description: 编辑社保
 * @Author: Coder
 * @Date: 2020-01-11 19:09:57
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="page_set">
    <div class="soc_container">
      <!-- header -->
      <div class="soc_header">
        <a-icon type="left" class="mg_r20 fs18" @click="$router.go(-1)" />
        <span style="color: #999999; background: #f7f7f7">
          <a-icon style="color: red" type="exclamation-circle" />
          工资报表中将扣除社保的缴纳和补缴数据，请确认核实无误。 灰色数据是系统默认数值，<span style="color: #000">黑色</span>
          数据是您手动保存的数值，
          <span style="color: #6a66f6">橙色</span> 数据是测算结果。
        </span>
      </div>

      <a-row type="flex" class="pd_t40 mg_b20">
        <!-- left -->
        <a-col class="soc_yuan mg_l55 mg_r25">
          {{ needData.name[0] }}
        </a-col>
        <!-- right -->
        <a-col>
          <a-row class="title1 mg_b18">
            {{ needData.name }}
            <a-tag v-if="needData.formalType == 1" color="#2db7f5"> 试用期 </a-tag>
            <a-tag v-if="needData.formalType == 2" color="#87d068"> 已转正 </a-tag>
          </a-row>
          <a-row class="mg_b18">
            <span class="sub_tit">最新工资基数</span>
            <span class="title1">0</span>
            <span class="sub_tit mg_l10">入职时间</span>
            <span class="title1">2019-12-12</span>
            <span class="sub_tit mg_l10">身份证号</span>
            <span class="title1">{{ needData.idCard ? needData.idCard : "暂无" }}</span>
          </a-row>
          <a-row class="mg_b18">
            <span class="sub_tit">本月不缴纳社保</span>
            <a-switch v-model="needData.socUnpayMonth" checked-children="开" un-checked-children="关" />
            <span class="sub_tit">本月不缴纳公积金</span>
            <a-switch v-model="needData.pfUnpayMonth" checked-children="开" un-checked-children="关" />
          </a-row>
        </a-col>
      </a-row>
      <!-- contene 2 -->
      <a-form :form="form">
        <div class="pd_b20" style="border-bottom: 1px solid #ccc">
          <!-- 参保城市 -->
          <a-form-item label="参保城市" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-cascader
              v-decorator="[
                'needData.socCity',
                {
                  initialValue: needData.socCity,
                  rules: [{ required: true, message: '选择城市!' }]
                }
              ]"
              style="width: 260px"
              :options="options"
              placeholder="选择城市"
              @change="onChangeCity"
            >
              <a-icon slot="suffixIcon" type="environment" class="test" />
            </a-cascader>
          </a-form-item>
          <!-- 社保主体 -->
          <!--  <a-form-item
            label="社保主体"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 20 }"
          >
            <a-select v-model="needData.socType" style="width: 260px">
              <a-select-option :value="0">非首次开户</a-select-option>
              <a-select-option :value="1">首次开户</a-select-option>
            </a-select>
          </a-form-item> -->
          <!-- 社保类型 -->
          <a-form-item label="社保类型" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-select v-model="needData.socType" style="width: 260px">
              <a-select-option :value="0">非首次开户</a-select-option>
              <a-select-option :value="1">首次开户</a-select-option>
            </a-select>
          </a-form-item>
          <!-- 户籍类型 -->
          <a-form-item label="户籍类型" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-select v-model="needData.censusType" style="width: 260px">
              <a-select-option :value="1">本市城镇</a-select-option>
              <a-select-option :value="2">本市农村</a-select-option>
              <a-select-option :value="3">外埠城镇</a-select-option>
              <a-select-option :value="4">外埠农村</a-select-option>
            </a-select>
          </a-form-item>
          <!-- 社保基数 -->
          <a-form-item label="社保基数" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-tooltip placement="right" title="（基数范围是3613 ~ 27786）">
              <a-input v-model="needData.socBasic" style="width: 260px">
                <a-tooltip slot="suffix"> ¥ </a-tooltip>
              </a-input>
            </a-tooltip>
          </a-form-item>
          <!-- 工伤比例 -->
          <a-form-item label="工伤比例" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-tooltip placement="right" title="(比例范围是0.1％ ~ 3％，推荐0.2％)">
              <a-input v-model="needData.workInjuryProp" style="width: 260px">
                <a-tooltip slot="suffix"> % </a-tooltip>
              </a-input>
            </a-tooltip>
          </a-form-item>
          <!-- 社保缴纳 -->
          <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <span slot="label"> 社保缴纳 </span>
            <span class="mg_r10">企业</span>
            <a-input v-model="needData.socAmountCompany" style="width: 260px">
              <a-tooltip slot="suffix"> ¥ </a-tooltip>
            </a-input>
            <span class="mg_l10">个人</span>
            <a-input v-model="needData.socAmountPerson" class="mg_l20" style="width: 260px">
              <a-tooltip slot="suffix"> ¥ </a-tooltip>
            </a-input>
          </a-form-item>
          <!--v-if =  "iconType == 'down'"" -->
          <a-table v-if="false" :data-source="data" :row-key="data => data.id">
            <a-table-column title="缴纳项目" data-index="address" />
            <a-table-column title="企业基数" />
            <a-table-column title="企业比例" />
            <a-table-column title="企业缴纳">
              <template slot-scope="text">
                <a-input v-model="text.firstName" style="width: 100px" />
              </template>
            </a-table-column>
            <a-table-column title="个人基数" />
            <a-table-column title="个人比例" />
            <a-table-column title="个人缴纳">
              <template slot-scope="text">
                <a-input v-model="text.lastName" style="width: 100px" />
              </template>
            </a-table-column>
          </a-table>
          <!-- 社保备注 -->
          <a-form-item label="社保备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-textarea v-model="needData.socRemark" :autoSize="{ minRows: 2, maxRows: 6 }" />
          </a-form-item>
        </div>
        <!-- 第二块 -->
        <div class="pd_b20 mg_t10" style="border-bottom: 1px solid #ccc">
          <!-- 公积金城市 -->
          <a-form-item label="公积金城市" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-cascader
              v-decorator="[
                'needData.pfCity',
                {
                  initialValue: needData.pfCity,
                  rules: [{ required: true, message: '选择城市!' }]
                }
              ]"
              style="width: 260px"
              :options="options"
              placeholder="选择城市"
              @change="onChangeCity"
            >
              <a-icon slot="suffixIcon" type="environment" class="test" />
            </a-cascader>
          </a-form-item>
          <!-- 公积金基数 -->
          <a-form-item label="公积金基数" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-tooltip placement="right" title="(基数范围是1868.33 ~ 22710。低于下限时，按照下限计算；高于上限时，按照上限计算)">
              <a-input v-model="needData.pfBasic" style="width: 260px">
                <a-tooltip slot="suffix"> ¥ </a-tooltip>
              </a-input>
            </a-tooltip>
          </a-form-item>
          <!-- 企业比例 -->
          <a-form-item label="企业比例" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-tooltip placement="right" title="(基数范围是1868.33 ~ 22710。低于下限时，按照下限计算；高于上限时，按照上限计算)">
              <a-input v-model="needData.pfPropCompany" style="width: 260px">
                <a-tooltip slot="suffix"> % </a-tooltip>
              </a-input>
            </a-tooltip>
          </a-form-item>
          <!-- 个人比例 -->
          <a-form-item label="个人比例" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-tooltip placement="right" title="(比例范围是5％ ~ 12％，推荐5％ 比例范围为5.00到12.00)">
              <a-input v-model="needData.pfPropPerson" style="width: 260px">
                <a-tooltip slot="suffix"> % </a-tooltip>
              </a-input>
            </a-tooltip>
          </a-form-item>
          <!-- 公积金缴纳 -->
          <a-form-item label="公积金缴纳" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <span class="mg_r10">企业</span>
            <a-input v-model="needData.pfAmountCompany" style="width: 260px">
              <a-tooltip slot="suffix"> ¥ </a-tooltip>
            </a-input>
            <span class="mg_l10">个人</span>
            <a-input v-model="needData.pfAmountPerson" class="mg_l20" style="width: 260px">
              <a-tooltip slot="suffix"> ¥ </a-tooltip>
            </a-input>
          </a-form-item>
          <!-- 公积金备注 -->
          <a-form-item label="公积金备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-textarea v-model="needData.pfRemark" :autoSize="{ minRows: 2, maxRows: 6 }" />
          </a-form-item>
        </div>
        <!-- 第三块 -->
        <div v-if="false" class="pd_b20 mg_t10" style="border-bottom: 1px solid #ccc">
          <!-- 残障金-->
          <a-form-item label="残障金" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-input v-model="needData.pfBasic" style="width: 260px">
              <a-tooltip slot="suffix"> ¥ </a-tooltip>
            </a-input>
          </a-form-item>
          <!-- 代缴服务费-->
          <a-form-item label="代缴服务费" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-tooltip placement="right" title="(包含社保、公积金的代理服务费)">
              <a-input v-model="needData.pfPropPerson" style="width: 260px">
                <a-tooltip slot="suffix"> ¥ </a-tooltip>
              </a-input>
            </a-tooltip>
          </a-form-item>
          <!-- 滞纳金-->
          <a-form-item label="滞纳金" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-input v-model="needData.pfBasic" style="width: 260px">
              <a-tooltip slot="suffix"> ¥ </a-tooltip>
            </a-input>
          </a-form-item>
        </div>
        <!-- 第四块 -->
        <div v-if="!needData.pfUnpayMonth || !needData.socUnpayMonth" class="pd_b20 mg_t10" style="border-bottom: 1px solid #ccc">
          <!-- 本月补交社保 -->
          <a-form-item v-if="!needData.socUnpayMonth" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <span slot="label">
              <!--  <span
                @click="
                  iconType == 'right' && needData.socPaybackMonth
                    ? (iconType = 'down')
                    : (iconType = 'right')
                "
              >
                <a-tooltip>
                  <a-icon :type="iconType" />
                </a-tooltip>
              </span> -->
              本月补缴社保
            </span>
            <a-switch v-model="needData.socPaybackMonth" checked-children="开" un-checked-children="关" />
            <template v-if="needData.socPaybackMonth">
              <span class="mg_r10 mg_l50">企业</span>
              <a-input v-model="needData.socAmountCompany" style="width: 260px">
                <a-tooltip slot="suffix"> ¥ </a-tooltip>
              </a-input>
              <span class="mg_l10">个人</span>
              <a-input v-model="needData.socAmountPerson" class="mg_l20" style="width: 260px">
                <a-tooltip slot="suffix"> ¥ </a-tooltip>
              </a-input>
              <a-icon class="mg_l50" type="tag" @click="showSocRemark = !showSocRemark" />
            </template>
          </a-form-item>

          <a-table v-if="false" :data-source="data" :row-key="data => data.id">
            <a-table-column title="缴纳项目" data-index="address" />
            <a-table-column title="企业基数" />
            <a-table-column title="企业比例" />
            <a-table-column title="企业缴纳">
              <template slot-scope="text">
                <a-input v-model="text.firstName" style="width: 100px" />
              </template>
            </a-table-column>
            <a-table-column title="个人基数" />
            <a-table-column title="个人比例" />
            <a-table-column title="个人缴纳">
              <template slot-scope="text">
                <a-input v-model="text.lastName" style="width: 100px" />
              </template>
            </a-table-column>
          </a-table>
          <!-- 本月补缴社保备注 -->
          <a-form-item v-if="showSocRemark" label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-textarea v-model="needData.socPaybackMonthRemark" placeholder="0-300字" :autoSize="{ minRows: 2, maxRows: 6 }" />
          </a-form-item>
          <!-- 本月补缴公积金 -->
          <a-form-item v-if="!needData.pfUnpayMonth" label="本月补缴公积金" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-switch v-model="needData.pfPaybackMonth" checked-children="开" un-checked-children="关" />
            <template v-if="needData.pfPaybackMonth">
              <span class="mg_r10 mg_l50">企业</span>
              <a-input v-model="needData.pfAmountCompany" style="width: 260px">
                <a-tooltip slot="suffix"> ¥ </a-tooltip>
              </a-input>
              <span class="mg_l10">个人</span>
              <a-input v-model="needData.pfAmountPerson" class="mg_l20" style="width: 260px">
                <a-tooltip slot="suffix"> ¥ </a-tooltip>
              </a-input>
              <a-icon class="mg_l50" type="tag" @click="showPfRemark = !showPfRemark" />
            </template>
          </a-form-item>
          <!-- 本月补缴公积金备注 -->
          <a-form-item v-if="showPfRemark" label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-textarea v-model="needData.socRemark" placeholder="0-300字" :autoSize="{ minRows: 2, maxRows: 6 }" />
          </a-form-item>
        </div>
      </a-form>
    </div>
    <footer class="soc_footer">
      <a-button type="primary" @click="updateSave">更新保存</a-button>
      <a-button @click="$router.go(-1)">取消</a-button>
    </footer>
  </div>
</template>

<script>
import { Wages, Files, Common } from "@/api/wages/index";
const data = [
  {
    id: 1,
    key: "1",
    firstName: "John",
    lastName: "Brown",
    age: 32,
    address: "New "
  }
];
export default {
  name: "Social",

  data() {
    return {
      statusType: null,
      // 本月补缴社保
      showSocRemark: false,
      // 本月补缴公积金
      showPfRemark: false,
      data,
      iconType: "right",
      id: this.$route.query.id,
      form: this.$form.createForm(this, { name: "social" }),
      options: [],
      city: "",
      needData: {
        empId: this.$route.query.id,
        companyId: this.$store.state.hr.companyId,
        censusType: 1,
        personTaxAmount: 0,
        personTaxProp: 0,
        pfAmountCompany: 0, // 公积金企业缴纳金额
        pfAmountPerson: 0, // 公积金个人缴纳金额
        pfBasic: 0,
        pfCity: [],
        pfPaybackMonth: false, // 0 1
        pfPaybackMonthAmount: 0, // 本月补缴公积金金额
        pfPropCompany: 0,
        pfPropPerson: 0,
        pfUnpayMonth: false, // 0 1
        salaryBasic: 0,
        socAmountCompany: 0, // 社保企业缴纳金额
        socAmountPerson: 0, // 社保个人缴纳金额
        socBasic: 0,
        socCity: [],
        socMain: 1,
        socPaybackMonth: false, // 0 1
        socPaybackMonthAmount: 0, // 本月补缴社保金额
        socPropCompany: 0,
        socPropPerson: 0,
        socRemark: "",
        socType: 1,
        socUnpayMonth: false, // 0 1
        valid: 1,
        workInjuryProp: 0
      }
    };
  },

  mounted() {
    if (this.id) {
      this.getEmpInfos();
      this.getCity();
    }
  },
  methods: {
    /* 获取省 */
    getCity() {
      Wages({ url: Common.city }).then(({ data }) => {
        if (data && data.length) {
          this.loop(data);
          this.options = data;
        }
      });
    },
    loop(data) {
      data.forEach(item => {
        item.label = item.name;
        item.value = item.id;
        if (item.children) this.loop(item.children);
      });
    },

    /* 城市级联 */
    onChangeCity(value) {},

    /* 员工信息 */
    getEmpInfos() {
      Wages({ url: Files.searchEmpInfos + this.id })
        .then(({ data }) => {
          this.needData = Object.assign({}, this.needData, data);
        })
        .then(() => {
          this.getSocInfo();
        });
    },
    /* 员工社保信息 */
    getSocInfo() {
      Wages({ url: Files.socInfo, params: { empId: this.id } }).then(({ data }) => {
        this.statusType = data.entities.length;
        if (data) {
          this.needData = Object.assign({}, this.needData, data.entities[0]);
          /* 金钱格式化 */
          this.needData.socBasic /= 100;
          this.needData.socAmountCompany /= 100;
          this.needData.socAmountPerson /= 100;
          this.needData.pfBasic /= 100;
          this.needData.pfAmountCompany /= 100;
          this.needData.pfAmountPerson /= 100;
          /* 金钱格式化 */
          this.needData.socType = Number(this.needData.socType);
          if (this.needData.pfCity.length) {
            this.needData.pfCity = JSON.parse(this.needData.pfCity);
          }
          if (this.needData.socCity.length) {
            this.needData.socCity = JSON.parse(this.needData.socCity);
          }
        }
      });
    },
    /* 更新保存 */
    updateSave() {
      const copyData = JSON.parse(JSON.stringify(this.needData));
      /* 金钱格式化 */
      copyData.socBasic *= 100;
      copyData.socAmountCompany *= 100;
      copyData.socAmountPerson *= 100;
      copyData.pfBasic *= 100;
      copyData.pfAmountCompany *= 100;
      copyData.pfAmountPerson *= 100;
      /* 金钱格式化 */

      this.form.validateFields((err, values) => {
        copyData.pfCity = values.needData.pfCity;
        copyData.socCity = values.needData.socCity;
        if (!err) {
          if (!!this.statusType) {
            Wages({ url: Files.socInfo, data: copyData, method: "PUT" }).then(data => {
              if (data.success) {
                this.$notification["success"]({
                  message: "成功",
                  description: "修改成功"
                });
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
            });
          } else {
            Wages({ url: Files.socInfo, data: copyData, method: "POST" }).then(data => {
              if (data.success) {
                this.$notification["success"]({
                  message: "成功",
                  description: "新增成功"
                });
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
            });
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.soc_container {
  width: 90%;
  padding: 10px;
  .soc_header {
    padding: 6px;
  }
  .soc_yuan {
    line-height: 100px;
    text-align: center;
    width: 100px;
    height: 100px;
    background: #1bc489;
    border-radius: 100%;
    color: #fff;
    font-size: 4rem;
  }
  .title1 {
    font-size: 16px;
    color: #2c2d30;
  }
}
.soc_footer {
  line-height: 60px;
  width: 100%;
  text-align: center;
}
</style>
